<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Magazine</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>Simple Magazine <span style="color: #989898;">/ News</span></h1>
    </header>
    <!-- 导航栏 -->
    <nav>
        <div>
            <ul>
                <li class="dropdown1">
                    <a href="">News</a>
                    <div class="dropdown-content1">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="dropdown2">
                    <a href="">Politics</a>
                    <div class="dropdown-content2">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="dropdown3">
                    <a href="">Culture</a>
                    <div class="dropdown-content3">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="dropdown4">
                    <a href="">Sport</a>
                    <div class="dropdown-content4">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="dropdown5">
                    <a href="">Deate</a>
                    <div class="dropdown-content5">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="dropdown6">
                    <a href="">Entertainment</a>
                    <div class="dropdown-content6">
                        <div><img src="./img/navigation-arrow.gif"></div>
                        <div>
                            <ul>
                                <li><a href="">Frontpage</a></li>
                                <li><a href="">Style Demo</a></li>
                                <li><a href="">Two Columns</a></li>
                                <li><a href="">Single Column</a></li>
                                <li><a href="">Archives</a></li>
                                <li><a href="">Empty Page</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="left">
            <div class="imformation">
                <h1>Template Information</h1>
                <h2>18:11 , Sunday , àugust 2 , 2009 Ъy Viktor Persson</h2>
                <div><img src="./img/news-image-big.jpg"></div>
                <div>
                    <p>This is a free website template by Arcsin, built using tableless YHTML and CSS.</p>
                    <p>This template is distributed under a <span class="blue">Creative Commons Attribution 2.5 License</span> , which allows you to use and modify it for any purpose(personal and commercial) ,under the condition that you keep the prowided credit links in the footer.</p>
                    <p>The latest t emplate version and CMS conversions for platforms such as WordPress and Blogger can be found at the official page.</p>
                    <p>Fоr mоrе t еmрlаtе?, quе?t?оn? аnd соmumеnt? рlеа?е v???t Аrс??<span class="blue">n web Templates</span>.</p>
                    <p>Have fun!</p>
                </div>
                <a href="" class="more">Read more 》</a>
            </div>
            <div class="pic">
                <div>
                    <div><img src="./img/news-image-med-1.jpg"></div>
                    <h3>Curabitur justo arcu</h3>
                    <p>Bibendum at bibendum in,semper nec ibh</p> 
                </div>
                <div>
                    <div><img src="./img/news-image-med-2.jpg"></div>
                    <h3>Curabitur justo arcu</h3>
                    <p>Bibendum at bibendum in,semper nec ibh</p> 
                </div>
                <div>
                    <div><img src="./img/news-image-med-3.jpg"></div>
                    <h3>Curabitur justo arcu</h3>
                    <p>Bibendum at bibendum in,semper nec ibh</p> 
                </div>
            </div>
        </div>
        <div class="mid">
            <div class="top">
                <div><img src="./img/news-image-small-1.jpg"></div>
                <div>Article title</div>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.</p>
                <a href="" class="more">Read more 》</a>
            </div>
            <div id="mid">
                <div><img src="./img/news-image-small-2.jpg"></div>
                <div>Second Article Title</div>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.</p>
                <a href="" class="more">Read more 》</a>
            </div>
            <div class="bottom">
                <div>Third title</div>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.</p>
                <a href="" class="more">Read more 》</a>
            </div>
        </div>
        <div class="right">
            <table border="1">
                <thead>
                    <tr>
                        <th>Latest News</th>
                        <th><img src="./img/icon-time.gif"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td><a href=""><span style="color: #61809a;">Broese all》</span></a></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table border="1">
                <thead>
                    <tr>
                        <th>Latest News</th>
                        <th><img src="./img/icon-time.gif"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td><a href=""><span style="color: #61809a;">Broese all》</span></a></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table border="1">
                <thead>
                    <tr>
                        <th>Latest News</th>
                        <th><img src="./img/icon-time.gif"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td>Archives Empty Page</td>
                        <td>20:49</td>
                    </tr>
                    <tr>
                        <td><a href=""><span style="color: #61809a;">Broese all》</span></a></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
    </main>
    <div id="menu">
        <div>
            <h1>About Simple Magazine</h1>
            <p>Lorem ipsum dolor sit amet, </p>
            <p>consectetur adipiscing elit.</p>
            <a href="" class="more">Learn more》</a>
        </div>
        <div>
            <h1>Follow Us (RSS)</h1>
            <div>
                <img src="./img/icon-feed.gif">
                <a href=""> Lorem ipsum</a>
            </div>
            <div>
                <img src="./img/icon-feed.gif">
                <a href="">  Dolor sit amet</a>
            </div>
            <div>
                <img src="./img/icon-feed.gif">
                <a href=""> Consectetu</a>
            </div>
            <div>
                <img src="./img/icon-feed.gif">
                <a href="">  Adipicing elit</a>
            </div>
        </div>
        <div>
            <h1>Help & Support</h1>
            <p>Lorem ipsum dolor sit amet, </p>
            <p>consectetur adipiscing elit.</p>
            <a href="" class="more">Freque Questions (0PAQ)>></a>
        </div>
        <div>
            <h1>Get in touch</h1>
            <p>Lorem ipsum dolor sit amet, </p>
            <p>consectetur adipiscing elit.</p>
            <a href="" class="more">Online contact form >></a>
        </div>
    </div>
    <footer>
        <div id="top">
            <h3>Simple Magazine</h3>
            <div><img src="./img/arrow.png" alt=""></div>
            <div>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">News</a></li>
                    <li><a href="">Politics</a></li>
                    <li><a href="">Culture</a></li>
                    <li><a href="">Sport</a></li>
                    <li><a href="">Debate</a></li>
                    <li><a href="">Entertainment</a></li>
                </ul>
            </div>
            <h4>Popular free web templates at</h4>
            <h4>Website templete by Arcsin</h4>
        </div>
        <div id="bottom"><span class="blue">www. Websi teT emplates0rline. com</span>.Impressive <span class="blue">Flash Templates for Websi tes</span></div>
    </footer>
</body>
</html>